<template>
  <div class="tabCenter">
    <div style="background-color:#F0F2F5;">
      <card-list :cardListData="dataSource" :typeStatus="2">
        <template v-slot:cardCont="{ item }">
          <a-card :hoverable="true">
            <a-card-meta class="content-card">
              <div style="margin-bottom: 28px;font-size:18px;font-weight:bold;" slot="title">
                <a-icon :component="iconHouseShop" class="icon-style"/>{{ item.mdmc }}</div>
              <div class="color3" slot="description">
                <div class="meta-line1 ">
                  <a-icon :component="iconHouseCall" class="icon-style" style="position:absolute;z-index:1;top:3px;"/>
                  <div class="adderss" style="padding-left:23px;vertical-align:0px;">{{ item.lxdh }}</div>
                </div>
                <div class="meta-content">
                  <a-icon :component="iconHouseAd" class="icon-style" style="position:absolute;z-index:1;top:3px;"/>
                  <div class="adderss" style="padding-left:23px;">{{ item.xzxqmc }}{{ item.xxdz }}</div>
                </div>
              </div>
            </a-card-meta>
            <div class="active_button">
              <a-popconfirm title="是否删除门店？" @confirm="handleDelete(item.storesId)" okText="确认" cancelText="取消">
                <a-button type="primary" ghost >{{ $t('public.del') }}</a-button>
              </a-popconfirm>
              &nbsp;<a-button type="primary" ghost @click="changeStore(item)">{{ $t('public.edit') }}</a-button>&nbsp;
              <a-button type="primary" class="primary_linear" @click="housingOwnership(item.storesId,item.mdmc)">{{ $t('resource.affiliation') }}</a-button>
            </div>
          </a-card>
        </template>
        <template v-slot:cardAdd>
          <a-card :hoverable="true" class="addCard" @click="addStore">
            <a-icon :component="iconHouseAdd" style="font-size:48px;padding-bottom:10px;"/><br/><span style="color:#009CFF;">{{ $t('resource.addStore') }}</span>
          </a-card>
        </template>
      </card-list>
    </div>
    <div class="example" v-if="loading">
      <a-spin class="loadingcenter" />
    </div>
    <store-modal ref="storeModal"></store-modal>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getStoreList, deleteStore } from '@/api/store' // eslint-disable-line 
import CardList from '../modules/CardList'
import StoreModal from './StoreModal'
import { iconHouseAd, iconHouseShop, iconHouseCall, iconHouseAdd } from '@/core/icons'
export default {
  name: 'StoreContent',
  components: {
    CardList, // 卡片样式typeStatus 2 代表有新增
    StoreModal // model弹窗
  },
  data () {
    return {
      loading: false,
      dataSource: [], // 卡片数据
      iconHouseAd, // 地址图标
      iconHouseShop, // 房屋图片
      iconHouseCall, // 电话图标
      iconHouseAdd, // 新增图标
      params: {
        hoperatorId: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  created () {
    this.searchAjax()
  },
  methods: {
    // 请求函数
    searchAjax () {
      this.params.hoperatorId = this.userInfo.id
      this.loading = true
      getStoreList(this.params).then(res => {
        const arrayList = res.data || []
        arrayList.push(null) // 必须此操作，为了出现新增门店按钮
        this.dataSource = arrayList
        setTimeout(() => {
          this.loading = false
        }, 200)
      }).catch((res) => { console.log(res) })
    },
    /* 删除
    **/
    handleDelete (val) {
      const delParams = { storesId: val }
      deleteStore(delParams).then(res => {
        this.searchAjax() // 删除成功更新列表
        this.$notification['success']({
          message: this.$t('message.successTitle'),
          description: this.$t('message.delDes')
        })
      }).catch((res) => {
        console.log(res)
      })
    },
    /** 编辑弹窗 */
    changeStore (val) {
      this.$refs.storeModal.changeStore(val)
    },
    /** 新建弹窗 */
    addStore () {
      this.$refs.storeModal.addStore()
    },
    /** 房源归属弹窗 */
    housingOwnership (val, mdmc) {
      this.$refs.storeModal.housingOwnership(val, mdmc)
    }
  }
}
</script>
<style lang="less" scoped>
.tabCenter{margin-left: 200px;background-color:#fff;
  /deep/ .caritem {
    width:270px;
    padding:0 4px !important;
    .ant-card-body{padding:24px 19px 16px;}
    .ant-card-hoverable{cursor: default}
    .content-card{
      .meta-content {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 14px;
        height:42px
      }
      .meta-line1 {
       position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        font-size: 14px;
        margin-bottom:16px;
      }
      .color3{color:#333}
      .icon-style{font-size: 14px;vertical-align: 0px;margin-right: 7px;}
    }
    .ant-list-item{margin-bottom: 8px;}
    .active_button{
        padding-top:44px;
        margin-right:-5px;margin-left: -5px;
      }
     .ant-card-bordered {
      border:none;
      border-radius: 5px;
      height:248px;
      box-shadow:0px 6px 10px 0px rgba(220,220,220,1);
    }
     .ant-card-bordered:hover{
      border:none;
      border-radius: 5px;
      height:248px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
    }
    .addCard {
      display: flex;
       .ant-card-body{
        margin: auto;
        text-align: center;
      }
      cursor: pointer !important;
    }
  }
    /deep/ .ant-row{margin-left:-6px !important;margin-right:-6px !important;}
}
</style>
